<template>
    <div class="row" v-loading="loading">
        <el-scrollbar height="100%">
            <div class="middle">
                <div style="z-index: 10;">
                    <!-- 轮播图模块 -->
                    <div class="banner-section">
                        <!-- 卡片区 -->
                        <div class="card-container">
                            <div class="ai-card interactive-card" @click="router.push('/ai')">
                                <h4>AI顾问</h4>
                            </div>
                            <div class="screen-card interactive-card" @click="router.push('/screen')">
                                <h4>数据大屏</h4>
                            </div>
                        </div>

                        <el-carousel height="400px" motion-blur class="carousel-container">
                            <el-carousel-item v-for="item in carouselData" :key="item.id">
                                <div class="carousel-content">
                                    <img :src="item.url" class="carousel-image" alt="banner" />
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>

                    <!-- 模板示例1 -->
                    <section class="template-section">
                        <div class="section-header">
                            <h2>模板示例1</h2>
                            <el-link type="primary" class="more-link" @click="router.push('/template')">更多 ></el-link>
                        </div>
                        <div class="grid-container">
                            <div v-for="(item, index) in cardList" :key="index" class="template-card"
                                @click="goToRoute(item.url)">
                                <div class="card-img">
                                    <img src="@/assets/images/default-bg.png" alt="模板" />
                                </div>
                                <div class="card-label">
                                    <h4>{{ item.title }}</h4>
                                    <el-text line-clamp="3">{{ item.content }}</el-text>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 模板示例2 -->
                    <section class="template-section">
                        <div class="section-header">
                            <h2>模板示例2</h2>
                            <el-link type="primary" class="more-link" @click="router.push('/template')">更多 ></el-link>
                        </div>
                        <div class="grid-container">
                            <div v-for="(item, index) in cardList" :key="index" class="template-card"
                                @click="goToRoute(item.url)">
                                <div class="card-img">
                                    <img src="@/assets/images/default-bg.png" alt="模板" />
                                </div>
                                <div class="card-label">
                                    <h4>{{ item.title }}</h4>
                                    <el-text line-clamp="3">{{ item.content }}</el-text>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- 页脚 -->
                    <footer class="app-footer">
                        © 2025 ZPTC. All rights reserved.
                    </footer>
                </div>

                <!-- 背景动画 -->
                <SvgBg style="width: 100%; height: 100%;position: absolute;"></SvgBg>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const loading = ref(false);
const router = useRouter();
const cardList = ref([
    {
        title: '示例-1',
        url: '/example1',
        content: '内容-1'
    },
    {
        title: '示例-2',
        url: '/example2',
        content: '内容-2'
    },
    {
        title: '示例-3',
        url: '/example3',
        content: '内容-3'
    },
    {
        title: '示例-4',
        url: '/example4',
        content: '内容-4'
    }
]);
const carouselData = [
    { id: 1, url: new URL('@/assets/images/carousel/carousel1.svg', import.meta.url).href },
    { id: 2, url: new URL('@/assets/images/carousel/carousel2.svg', import.meta.url).href },
    { id: 3, url: new URL('@/assets/images/carousel/carousel3.svg', import.meta.url).href }
];

const goToRoute = (route) => {
    window.open(router.resolve(route).href, '_blank');
};

onMounted(() => { });
</script>

<style lang="scss" scoped>
* {
    font-family: Pixel-Font;
    box-sizing: border-box;
}

/* 基础布局 */
.row {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}

.middle {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 30px 3%;
    max-width: 1440px;
    margin: 0 auto;
}

/* 轮播图模块 */
.banner-section {
    display: flex;
    gap: 20px;
    height: 400px;

    .carousel-container {
        flex: 3;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        .carousel-content {
            position: relative;
            height: 100%;

            .carousel-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .card-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .interactive-card {
            flex: 1;
            border-radius: 12px;
            padding: 20px;
            transition: all 0.3s ease;
            cursor: pointer;

            h4 {
                margin: 0;
                font-size: 28px;
                color: #fff;
                text-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
            }

            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
            }
        }

        .ai-card {
            /* background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); */
            background: url(@/assets/images/ai-card.svg) no-repeat center / cover;
        }

        .screen-card {
            /* background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); */
            background: url(@/assets/images/screen-card.svg) no-repeat center / cover;
        }
    }
}

/* 模板区通用样式 */
.template-section {
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;

        h2 {
            font-size: 24px;
            color: #333;
        }

        .more-link {
            font-size: 14px;
        }
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;

        .template-card {
            width: 100%;
            aspect-ratio: 1;
            background: white;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;

            &:hover {
                transform: scale(1.05);
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
            }

            .card-img {
                height: 200px;
                background-color: #ccc;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .card-label {
                height: 100px;
                padding: 10px;
                color: #444;

                h4 {
                    font-size: 18px;
                    margin: 8px 0 5px;
                }
            }
        }
    }
}

/* 滚动条样式 */
::v-deep .el-scrollbar__thumb {
    /* 设置滚动条颜色 */
    background: transparent;
    /* 透明色 */
}

.app-footer {
    text-align: center;
    padding: 20px;
    color: #666;
    margin-top: 40px;
}
</style>